import Logo from '@/components/logo';
import { useSettings } from '@/store/settingStore';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ThemeLayout } from '@/types/enum';
import { SvgIcon } from '@/components/icon';
import { NavLink } from 'react-router-dom';

type Props = {
  collapsed: boolean;
  onToggle: () => void;
};
export default function NavLogo({ collapsed, onToggle }: Props) {
  const { themeLayout } = useSettings();
  const dataAppId = localStorage.getItem('appId') || '';
  const dataShareId = localStorage.getItem('shareId') || '';
  return (
    <div style={{ height: `80px` }} className="relative flex items-center justify-center py-4">
      <div className="flex items-center">
        {/* <Logo /> */}
        <div>
          {themeLayout === ThemeLayout.Mini && <SvgIcon icon="ic-logo-two" size={46} />}
          {themeLayout !== ThemeLayout.Mini && <SvgIcon icon="ic-logo-three" size={206} />}
        </div>
      </div>
      <div
        onClick={onToggle}
        onKeyDown={onToggle}
        className="border-border bg-bg-paper absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none items-center justify-center rounded-full border border-dashed text-center text-sm md:flex"
      >
        {collapsed ? (
          <RightOutlined className="text-text-disabled text-xs" />
        ) : (
          <LeftOutlined className="text-text-disabled text-xs" />
        )}
      </div>
    </div>
  );
}
